<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title><th:block th:text="${tilesetName}" /> Mapbox预览</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="/static/assets/maplibre-gl-js/v4.5.1/maplibre-gl.css" rel="stylesheet">
    <script src="/static/assets/maplibre-gl-js/v4.5.1/maplibre-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
<script th:inline="javascript">
    const metaData = [[${metaData}]];
    const basePath = [[${basePath}]];
    const tiles = basePath + "/api/tilesets/" + [[${tilesetName}]] + "/{z}/{x}/{y}." + metaData.format;

    const map = new maplibregl.Map({
        container: 'map',
        attributionControl: false,
        style: {
            "version": 8,
            "name": "Mapbox",
            "sprite": basePath + (metaData.name === "Shortbread" ? "/static/sprites/versatiles/sprites" : "/static/sprites/streets/sprite"),
            "glyphs": basePath + "/api/fonts/{fontstack}/{range}.pbf",
            "sources": {
                "osm-tiles": {
                    "scheme": "tms",
                    "type": "vector",
                    "tiles": [tiles],
                    "bounds": metaData.bounds.split(",").map(Number),
                    "minzoom": parseInt(metaData.minzoom),
                    "maxzoom": parseInt(metaData.maxzoom),
                    'attribution':
                        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }
            },
            "layers": []
        },
        center: [110, 30],
        zoom: 3,
        hash: true
    });

    function addAdminBoundary(color) {
        map.addSource('China', {
            type: 'geojson',
            data: '/static/ChinaProvince.geojson'
        });

        map.addLayer({
            'id': 'blur-line',
            'type': 'line',
            'source': 'China',
            "paint": {
                "line-color": color,
                "line-width": 10,
                "line-blur": 6  //模糊效果
            },
        });

        map.addLayer({
            'id': 'white-line',
            'type': 'line',
            'source': 'China',
            "paint": {
                "line-color": "white",
                "line-width": 2
            },
        });

        map.addLayer({
            'id': 'Province',
            'type': 'symbol',
            source: 'China',
            layout: {
                'text-field': ['get', 'name'],
                'text-size': 12,
                "text-allow-overlap": false,
                "text-offset": [0, 0],
                "text-anchor": "center",
                "text-justify": "center",
                'text-font': ['Arial Unicode MS Regular'],
            },
            paint: {
                "text-halo-color": "#444444",
                "text-halo-width": 1,
                "text-color": '#FFFFFF'
            }
        });
    }

    function addLayers() {
        //https://versatiles.org/overview.html
        if (metaData.name === "Shortbread") {
            const request = new XMLHttpRequest();
            request.open("get", "/static/styles/VersaTiles.json");
            request.send(null);
            request.onload = function () {
                if (request.status === 200) {
                    const layers = JSON.parse(request.responseText);
                    layers.forEach(function (layer) {
                        map.addLayer(layer);
                    })
                }
                addAdminBoundary("#00263D")
            }
        } else {
            const request = new XMLHttpRequest();
            request.open("get", "/static/styles/blue.json");
            request.send(null);
            request.onload = function () {
                if (request.status === 200) {
                    const layers = JSON.parse(request.responseText);
                    layers.forEach(function (layer) {
                        map.addLayer(layer);
                    })
                }
                addAdminBoundary("#70CBFF")
            }
        }
    }

    map.on('load', () => {
        addLayers()

        if (metaData.center) {
            setTimeout(function () {
                const center = metaData.center.split(",");
                map.flyTo({
                    center: [center[0], center[1]],
                    zoom: center[2],
                    essential: true
                });
            }, 2000)
        } else {
            console.log("no center set!")
        }
    });

    map.addControl(new maplibregl.NavigationControl())
    map.addControl(new maplibregl.FullscreenControl())
    map.addControl(new maplibregl.ScaleControl())
</script>
</body>
</html>